<template>
  <Loading v-show="isLoading" />

  <!-- Content -->
  <div
    class="w-1/3 mx-auto mt-40 shadow-2xl shadow-blue-300 rounded-box"
    v-show="!isLoading"
  >
    <h1 class="text-4xl text-center pt-4">{{ currentStudent.name }}</h1>

    <div class="w-3/4 mx-auto">
      <label class="input input-bordered flex items-center gap-2 my-4">
        Class
        <input
          type="text"
          class="grow"
          :value="`Class ${currentStudent.class} | Year ${currentStudent.grade}`"
          disabled
        />
      </label>

      <label class="input input-bordered flex items-center gap-2 my-4">
        Score
        <input type="number" class="grow" v-model="score" min="0" max="100" />
      </label>

      <select class="select select-bordered w-full mb-4" v-model="subject">
        <option disabled selected>Choose Subject</option>
        <option>Mathematics</option>
        <option>English</option>
        <option>History</option>
        <option>Geography</option>
        <option>Science</option>
        <option>Chemistry</option>
        <option>Physics</option>
        <option>Biology</option>
        <option>Music</option>
      </select>

      <div class="grid grid-cols-2 gap-4">
        <select class="select select-bordered w-full" v-model="semesterYear">
          <option disabled>Choose Subject</option>
          <option v-for="year in yearList" :key="year">{{ year }}</option>
        </select>
        <select class="select select-bordered w-full" v-model="semesterSeason">
          <option disabled>Choose Subject</option>
          <option>Spring</option>
          <option>Fall</option>
        </select>
      </div>
    </div>

    <div class="text-center">
      <button class="btn btn-primary my-2" @click="onClick">
        Update Score
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import Loading from '@/ui/Loading.vue';

import { getScoreByScoreId, updateScore } from '@/services/apiScore';
import { getStudentByStudentId } from '@/services/apiStudent';
import { useToast } from 'vue-toastification';

const route = useRoute();
const router = useRouter();

const currentStudent = ref({
  name: 'someone',
  class: 'x',
  grade: 'x',
});
const score = ref(0);
const subject = ref('Mathematics');

const semesterSeason = ref('Spring');
const semesterYear = ref(new Date().getFullYear());

const yearList = Array.from(
  { length: new Date().getFullYear() - 2000 + 1 },
  (_, index) => index + 2000
);

const toast = useToast();
async function onClick() {
  toast.info('Updating...');

  const newScore = {
    score: score.value,
    subject: subject.value,
    semesterSeason: semesterSeason.value,
    semesterYear: semesterYear.value,
  };

  const scores = await updateScore(route.params.id, newScore);
  console.log(scores);

  toast.clear();
  toast.success('Successfully updated');
  router.push({ name: 'score' });
}

const isLoading = ref(true);
onMounted(async () => {
  isLoading.value = true;

  const scores = await getScoreByScoreId(route.params.id);
  const scoreData = await scores[0];

  console.log(scoreData);

  score.value = scoreData.score;
  subject.value = scoreData.subject;
  semesterSeason.value = scoreData.semesterSeason;
  semesterYear.value = scoreData.semesterYear;

  const student = await getStudentByStudentId(scoreData.student_id);
  currentStudent.value = student;

  isLoading.value = false;
});
</script>
